const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
console.log(MiniCssExtractPlugin.loader);
// module - rules -
// balel-loader
const babelLoader = {
  test: /.js$/,
  use: {
    loader: "babel-loader"
  },
  exclude: "/node_modules/"
};
// css-loader
const cssLoader = {
  test: /\.css$/,
  use: [
    {
      loader: MiniCssExtractPlugin.loader,
      options: {
        publicPath: "../"
      }
    },
    "css-loader" //打包合并css
  ]
};

// plugins #执行顺序从上到
// 自动生成html
const htmlWebpackPlugin = new HtmlWebpackPlugin({
  title: "webpack学习",
  filename: "index.html",
  template: "./public/index.html",
  inject: "body",
  minify: false,
  hash: true
});

// 清除文件夹
const cleanWebpackPlugin = new CleanWebpackPlugin();

// 自动注入css
const miniCssExtractPlugin = new MiniCssExtractPlugin({
  filename: "[name].css",
  chunkFilename: "[id].css"
});

module.exports = {
  //entry:"./src/index.js",   #入口文件路径配置
  entry: {
    // #入口文件配置可以使用字符串模式也可以使用对象模式
    main: "./src/index.js"
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [babelLoader, cssLoader]
  },
  plugins: [cleanWebpackPlugin, htmlWebpackPlugin, miniCssExtractPlugin]
};
